﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Signalr测试</title>
    <script src="../lib/signalr/signalr.js"></script>
    <script src="../lib/signalr-protocol-msgpack/msgpack5.js"></script>

    <script src="../lib/signalr-protocol-msgpack/signalr-protocol-msgpack.js"></script>
    
</head>
<body> 
    <div>

        <div>
            <input type="text" id="userInput" />
            <input type="text" id="messageInput" />

        </div>
        <button id="sendButton">发送</button>
    </div>

    <script type="text/javascript">
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("https://localhost:44327/chatHub")
            .configureLogging(signalR.LogLevel.Information)
            .withHubProtocol(new signalR.protocols.msgpack.MessagePackHubProtocol())
            .build();

        connection.on("ReceiveMessage", (user, message) => {
            const encodedMsg = user + " says " + message;
            const li = document.createElement("li");
            li.textContent = encodedMsg;
            document.getElementById("messagesList").appendChild(li);
        });

        document.getElementById("sendButton").addEventListener("click", event => {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
            event.preventDefault();
        });

        connection.start().catch(err => console.error(err.toString()));

    </script>
    <ul id="messagesList">
         
    </ul>
</body>
</html>